<template>
  <van-nav-bar
    title="详情页面"
    left-text="返回"
    left-arrow
    @click-left="$router.back()"
    placeholder
    fixed
  />
  <br />
  <div class="title">{{ detailArr.proname }}</div>
  <br />
  <van-swipe :autoplay="3000" lazy-render>
    <van-swipe-item v-for="image in lunboArr" :key="image">
      <img :src="image" class="lunbo-item" />
    </van-swipe-item>
  </van-swipe>
  <van-row class="list" justify="center">
    <van-col>
      <div class="size">分类：{{ detailArr.category }}</div>
      <div class="size">品牌：{{ detailArr.brand }}</div>
      <div style="color: red" class="size">￥{{ detailArr.originprice }}</div>
      <div class="van-multi-ellipsis--l3">{{ detailArr.desc }}</div>
    </van-col>
  </van-row>
  <van-action-bar placeholder fixed>
    <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
    <van-action-bar-icon icon="cart-o" text="购物车" to="/cart" :badge="num" />
    <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
    <van-action-bar-button type="warning" text="加入购物车" @click="cartFn" />
    <van-action-bar-button type="danger" text="立即购买" />
  </van-action-bar>
</template>

<script setup>
import axios from 'axios'
import { useRoute, useRouter } from 'vue-router'
import { ref } from 'vue'
import { num, getCartList } from '@/stores/huibiao.js'
let detailArr = ref([])
let lunboArr = ref([])
let route = useRoute()
let router = useRouter()
// 获取搜索参数
let detailApi = 'http://localhost:3001/api/pro/detail/' + route.query.proid
async function detailPage() {
  let r = await axios.get(detailApi)
  console.log(r.data.data)
  detailArr.value = r.data.data
  lunboArr.value = r.data.data.imgs
}
detailPage()
// 加入购物车
let cartAddApi = ref('http://localhost:3001/api/cart/add')
async function cartFn() {
  let token = localStorage.getItem('token')
  let userid = localStorage.getItem('userid')
  if (token == null) {
    if (confirm('请先登录')) {
      router.push('/login')
    }
  } else {
    let r = await axios.post(
      cartAddApi.value,
      {
        proid: route.query.proid,
        userid,
        num: 1,
      },
      { headers: { token } },
    )
    console.log(r.data)
    showSuccessToast('加入购物车成功')
    getCartList()
  }
}
getCartList()
</script>

<style scoped>
.title {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
}
.list {
  width: 355px;
  margin: 0 auto;
}
.list img {
  width: 100%;
}
.size {
  font-size: 20px;
}
.lunbo-item {
  width: 375px;
}
</style>
